<template>
  <view class="home flex column">
    <u-navbar :is-back="true" :title="coalMineName" :title-bold="true" back-icon-color="#333333"
      title-color="#000"></u-navbar>
    <view>
      <u-tabs-swiper ref="uTabs" inactive-color="#999999" active-color="#0F643A" :list="list" :current="current"
        @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
    </view>
    <swiper class="item one" :current="swiperCurrent" @transition="transition" style="height: 100%"
      @animationfinish="animationfinish">
      <swiper-item class="swiper-item">
        <enterpriseInfo v-if="swiperCurrent === 0" :customerId="customerId" style="width: 100%; height: 100%">
        </enterpriseInfo>
      </swiper-item>
      <swiper-item class="swiper-item">
        <safe v-if="swiperCurrent === 1" :customerId="customerId" style="width: 100%; height: 100%"></safe>
      </swiper-item>
      <swiper-item class="swiper-item">
        <license v-if="swiperCurrent === 2" :superviseIndustry="superviseIndustry" :customerId="customerId"
          style="width: 100%; height: 100%"></license>
      </swiper-item>
      <swiper-item class="swiper-item">
        <technicalInfo v-if="swiperCurrent === 3" :superviseIndustry="superviseIndustry" :customerId="customerId"
          style="width: 100%; height: 100%"></technicalInfo>
      </swiper-item>
    </swiper>

    <u-tabbar bg-color="#0d1a51" inactive-color="#666" active-color="#fff" height="60px" icon-size="30"
      mid-button-size="40" :list="barList" :mid-button="midButton"></u-tabbar>
  </view>
</template>

<script>
import enterpriseInfo from "./compoments/enterpriseInfo/index";
import safe from "./compoments/safe/index";
import license from "./compoments/license/index";
import technicalInfo from "./compoments/technicalInfo/index";

export default {
  name: "index",
  components: { enterpriseInfo, safe, license, technicalInfo },
  data() {
    return {
      coalMineName: "",
      customerId: "",
      superviseIndustry: "",
      list: [
        {
          name: "企业信息",
        },
        {
          name: "安全生产",
        },
        {
          name: "企业证照",
        },
        {
          name: "技术资料",
        },
      ],
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      barList: [],
    };
  },
  methods: {
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
  },
  computed: {
    midButton() {
      return getApp().globalData.tabbarMidButton;
    },
  },
  onLoad() {
    // 判断账号权限
    const userInfo = getApp().globalData.userInfo;
    const data = {
      coalMineName: "企业信息",
      customerId: userInfo.customerId,
      superviseIndustry: userInfo.superviseIndustry,
    };
    this.barList = getApp().globalData.list;

    this.coalMineName = data.coalMineName;
    this.customerId = data.customerId;
    this.superviseIndustry = data.superviseIndustry;
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .swiper-div {
    display: flex;
    width: 100%;
    margin-bottom: 10rpx;
  }
}
</style>
